import { useState } from 'react'
import { Input, Modal ,Row, Col,Radio } from 'antd';
import marked from 'marked'
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'
import { CloseOutlined,PlusOutlined  } from '@ant-design/icons'
import WriteHeader from '../../components/WriteBlog/WriteHeader'
import HelpTips from '../../components/WriteBlog/HelpTips'
import './index.less'
const { TextArea } = Input;
export default function WriteCenter(){
  const renderer = new marked.Renderer()
  marked.setOptions({
    renderer:renderer,
    gfm:true,
    pedantic:false, // 不保证完全正确，如果有错会帮我们修改一下
    sanitize:false, //忽略html  一般都不 
    tables:true,
    breaks:true,
    smartLists:false,
    highlight:function(code){
      return hljs.highlightAuto(code).value
    }
  })

  const [markDown,setMarkDown] = useState('# This is a header\n\nAnd this is a paragraph')
  const [isModalVisible, setIsModalVisible] = useState(true);
  const [value, setValue] = useState(1);
  const changeInput = (e)=>{
    console.log('str',e.target.value)
    let obj = {}
    obj.name = e.target.value
    localStorage.setItem('demo',JSON.stringify(obj))
    console.log(obj)
    setMarkDown(marked(e.target.value))
  }

  const handleOk = ()=>{
    setIsModalVisible(false);
  }
  const handleCancel = ()=>{
    setIsModalVisible(false);
  }
  const onChangeRadio = e => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };
  // const str = 
  return (
    <div className="writeCenter column">
      <WriteHeader />
      <div className="writeBox">
        <Row className="rowItem" gutter={16}>
          <Col style={{position:'relative'}} span={10}>
            <div className="abPart" dangerouslySetInnerHTML={{__html:markDown}}>
            </div>
          </Col>
          <Col  span={10}>
            <div className="write-area abPart" >
              <TextArea placeholder="Borderless" style={{height:'100%'}} onChange={changeInput} bordered={false} />
            </div>
          </Col>
          <Col span={4}>
            <HelpTips />
          </Col>
        </Row>
      </div>

      <Modal title="发布博客" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <div className="apply-Dialog">
          <div className="article-tip flex">
            <div className="left-div">文章标签：</div>
            <div>
              <ul className="flex">
                <li>Node.js <CloseOutlined /></li>
                <li>前端 <CloseOutlined /></li>
                <li className="addDefault"><PlusOutlined />添加问帮标签</li>
              </ul>
            </div>
          </div>
          <div className="article-area flex">
            <div className="left-div">文章大区：</div>
            <div>
              <ul className="flex">
                <li>vuex</li>
                <li>ES6</li>
                <li className="addDefault"><PlusOutlined />添加文章分类</li>
              </ul>
            </div>
          </div>
          <div className="article-type flex">
            <div className="left-div">发布形式：</div>
            <div>
              <Radio.Group onChange={onChangeRadio} value={value}>
                <Radio value={1}>公开</Radio>
                <Radio value={2}>私密</Radio>
              </Radio.Group>
            </div>
          </div>
        </div>
      </Modal>
    </div>
  )
}